<template>
  <el-dialog v-model="visible" :title="props.id ? '修改抬头' : '新增抬头'">
    <el-form
      ref="formRef"
      :model="formData"
      label-width="100px"
      :rules="formRules"
    >
      <el-form-item label="开票抬头" prop="invoiceTitle" class="form-item">
        <el-input
          v-model="formData.invoiceTitle"
          placeholder="请输入开票抬头"
        />
      </el-form-item>
      <el-form-item label="纳税识别号" prop="invoiceTin" class="form-item">
        <el-input
          v-model="formData.invoiceTin"
          placeholder="请输入纳税识别号"
        />
      </el-form-item>
      <el-form-item label="地址" prop="invoiceAddress" class="form-item">
        <el-input v-model="formData.invoiceAddress" placeholder="请输入地址" />
      </el-form-item>
      <el-form-item label="电话" prop="invoicePhone" class="form-item">
        <el-input
          v-model="formData.invoicePhone"
          placeholder="请输入电话"
          maxlength="11"
        />
      </el-form-item>
      <el-form-item label="开户行" prop="openingBank" class="form-item">
        <el-input v-model="formData.openingBank" placeholder="请输入开户行" />
      </el-form-item>
      <el-form-item label="账号" prop="accountNumber" class="form-item">
        <el-input
          v-model="formData.accountNumber"
          placeholder="请输入账号"
          type="number"
        />
      </el-form-item>
      <el-form-item label="接收邮箱" prop="invoiceEmail" class="form-item">
        <el-input
          v-model="formData.invoiceEmail"
          placeholder="请输入接收邮箱"
        />
      </el-form-item>
      <el-form-item
        label="收件人+电话"
        prop="recipientTelephone"
        class="form-item"
      >
        <el-input
          v-model="formData.recipientTelephone"
          placeholder="请输入收件人+电话"
        />
      </el-form-item>
      <el-form-item
        label="收件人地址"
        prop="recipientAddress"
        class="form-item"
      >
        <el-input
          v-model="formData.recipientAddress"
          placeholder="请输入收件人地址"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel"> 取消 </el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">
        {{ props.id ? "修改" : "添加" }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, computed, watch } from "vue";

import {
  addInvoiceInfo,
  editInvoiceInfo,
  getInvoiceInfoDetail,
} from "@/api/invoice.js";

const { proxy } = getCurrentInstance();

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: "",
  },
});

const formData = reactive({
  invoiceTitle: undefined,
  invoiceTin: undefined,
  invoiceAddress: undefined,
  invoicePhone: undefined,
  openingBank: undefined,
  invoiceEmail: undefined,
  accountNumber: undefined,
  recipientTelephone: undefined,
  recipientAddress: undefined,
});

const formRef = ref();
const loading = ref(false);

const formRules = reactive({
  invoiceTitle: [
    { required: true, message: "请输入开票抬头", trigger: "blur" },
  ],
  invoiceTin: [
    { required: true, message: "请输入纳税识别号", trigger: "blur" },
  ],
  invoiceEmail: [
    { required: true, message: "请输入接收邮箱", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱格式",
      trigger: "blur",
    },
  ],
});

const emits = defineEmits(["update:value", "on-success"]);

const visible = computed({
  get() {
    return props.value;
  },
  set(val) {
    emits("update:value", val);
  },
});

// 取消操作
function handleCancel() {
  visible.value = false;
  // 重置表单数据
  Object.assign(formData, {
    id: "",
    invoiceTitle: undefined,
    invoiceTin: undefined,
    invoiceAddress: undefined,
    invoicePhone: undefined,
    openingBank: undefined,
    invoiceEmail: undefined,
    accountNumber: undefined,
    recipientTelephone: undefined,
    recipientAddress: undefined,
  });
  formRef.value?.resetFields();
}

async function handleSubmit() {
  if (!formRef.value) return;
  try {
    await formRef.value.validate();
    loading.value = true;
    if (props.id) {
      await editInvoiceInfo(formData);

      proxy.$modal.msgSuccess("修改成功");
    } else {
      await addInvoiceInfo(formData);
      proxy.$modal.msgSuccess("添加成功");
    }
    loading.value = false;
    visible.value = false;
    emits("on-success");
  } catch (error) {
    loading.value = false;
  }
}

function getDetail() {
  if (!props.id) {
    return;
  }
  getInvoiceInfoDetail(props.id).then(({ data }) => {
    Object.assign(formData, {
      ...data,
    });
  });
}

watch(
  () => visible.value,
  (val) => {
    if (val) {
      getDetail();
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style lang="scss" scoped>
.drawer-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .line {
    width: 100%;
    height: 1px;
    margin-top: 10px;
    background: #dcdfe6;
  }
}
.draw-content {
  padding: 0px;
}

.el-descriptions__body {
  background-color: transparent;
}
</style>
